<template>
    <div class="xuni_pj">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="选择商品" prop="name">
    <el-input class="msj_inputs" disabled v-model="ruleForm.name"></el-input> <el-button style="padding: 12px 10px;" @click="opensp">选择商品</el-button>
  </el-form-item>
<!-- 选择商品弹出框 -->
<el-dialog title="选择商品" :modal="false" :visible.sync="dialogTableVisible">
  <div class="spsearch">
    <p>药品名称</p>
    <el-input v-model="input" :keyup="input=input.replace(/[^\w\u4E00-\u9FA5]/g, '')" style="width: 50%;" ></el-input>
    <el-button size="small" style="padding: 12px 15px; margin-left: 10px;" @click="onsearch" >搜索</el-button>
  </div>
  <el-table :data="gridData" height="300px">
    <el-table-column width="500" label="商品">
      <template slot-scope="scope">
        <div class="msj_shoplist">
          <div class="msj_shoplist_img">
            <img :src="scope.row.img" alt="">
          </div>
          <span>{{ scope.row.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column  label="操作">
      <template slot-scope="scope">
        <el-button :type="scope.row.id==xuan.id?'danger':'primary'" @click="handel(scope.row)" style="padding: 5px;" size="small">{{scope.row.id==xuan.id?'取消':'选择'}}</el-button>
      </template>
    </el-table-column>
    
  </el-table>
  <div style="width: 100%; padding: 10px 0; display: flex; justify-content: center;">
    <el-button type="primary" style="padding: 10px;"  size="small" @click="onbaocun">保存</el-button>
    <el-button style="padding: 10px;"  size="small" @click="quxiao">取消</el-button>
  </div>
</el-dialog>
<!-- 遮罩层 -->
<div class="zhezhao" v-show="dialogTableVisible">

</div>
<!-- 评论时间 -->
  <el-form-item label="评论时间" >
    <el-col :span="5" style="margin-right: 5px;">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期"  v-model="ruleForm.date1" style="width: 100%; "></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="5" style="margin-right: 5px;">
      <el-form-item prop="date2">
        <el-time-picker placeholder="任意时间点"  v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
    <el-col  :span="5">
        <p style="font-size: 13px; color: red;">*评论时间,如果不选择,默认为当前时间</p>
    </el-col>
  </el-form-item>
  <!-- 用户头像 -->
  <el-form-item label="用户头像" prop="type">
    <div style="display: flex;">
      <el-input class="msj_inputs" disabled ></el-input>
    <el-upload  action="http://127.0.0.1:7001/upload" 
    :on-success="handleAvatarSuccess"
    :show-file-list="false"
    >
      <el-button size="small" style="padding: 12px 10px;" >选择图片</el-button>
    </el-upload>
    </div>
    <div class="msj_author">
      <i class="el-icon-error" v-show="ruleForm.author" style="position: absolute; top: -4px; right: -8px; color: red;" @click="deleauthor" ></i>
      <img v-if="ruleForm.author" :src="ruleForm.author" alt="">
      <i class="el-icon-picture-outline" v-else></i>
    </div>
    <p style="font-size: 13px; color: red;">*用户头像,如果不选择,默认从系统中随机读取</p>
    
  </el-form-item>

  <el-form-item label="用户昵称" >
    <el-input class="msj_inputs" :keyup="ruleForm.resource = ruleForm.resource.replace(/\s+/g, '')" v-model="ruleForm.resource"></el-input>
    <p style="font-size: 13px; color: red;">*用户昵称,如果不填写,默认从用户填写中随机读取</p>
  </el-form-item>

  <el-form-item label="评价等级" prop="desc" >
    <div style="height: 100%; padding: 10px 0;">
      <el-rate
    v-model="ruleForm.desc"
    :colors="colors">
  </el-rate>
    </div>
  </el-form-item>
  <!-- 首次评价 -->
  <el-form-item label="首次评价" required prop="textarea2" >
    <el-input
    onkeyup="value = value.replace(/\s+/g, '')"
  style="width: 300px;"
  type="textarea"
  :autosize="{ minRows: 4, maxRows: 6}"
  placeholder="请输入评价内容"
  v-model="ruleForm.textarea2">
</el-input>
<div style="display: flex; margin: 5px 0 0;">
      <el-input class="msj_inputs" disabled  v-model="firstimg.name"  placeholder="选择图片上传"></el-input>
    <el-upload action="http://127.0.0.1:7001/upload" :on-success="handlefirstSuccess" :show-file-list="false">
      <el-button size="small" style="padding: 12px 10px;" >选择图片</el-button>
    </el-upload>
    </div>

  </el-form-item>
  <!-- 回复 -->
  <el-form-item label="回复"   >
    <el-input
  style="width: 300px;"
  onkeyup="value = value.replace(/\s+/g, '')"
  type="textarea"
  :autosize="{ minRows: 4, maxRows: 6}"
  placeholder="请输入评价内容"
  v-model="ruleForm.huifu">
</el-input>
<div style="display: flex; margin: 5px 0 0;">
      <el-input class="msj_inputs" disabled  v-model="huifuimg.name" placeholder="选择图片上传"></el-input>
    <el-upload action="http://127.0.0.1:7001/upload" :on-success="handlehuifutSuccess" :show-file-list="false" >
      <el-button size="small" style="padding: 12px 10px;" >选择图片</el-button>
    </el-upload>
    </div>
  </el-form-item>
  <!-- 追加评价 -->
  <el-form-item label="追加评价"   >
    <el-input
  style="width: 300px;"
  type="textarea"
  :autosize="{ minRows: 4, maxRows: 6}"
  placeholder="请输入评价内容"
  v-model="ruleForm.zjpj">
</el-input>
<div style="display: flex; margin: 5px 0 0;">
      <el-input class="msj_inputs" disabled  placeholder="选择图片上传"></el-input>
    <el-upload action="http://127.0.0.1:7001/upload">
      <el-button size="small" style="padding: 12px 10px;" >选择图片</el-button>
    </el-upload>
    </div>
  </el-form-item>
  <el-form-item>
    <el-button style="padding: 10px;" type="primary" @click="submitForm('ruleForm')">确定</el-button>
    <el-button  style="padding: 10px 15px; " @click="resetForm()">取消</el-button>
  </el-form-item>
</el-form>
    </div>
</template>

<script>
import {getZwyShopListBx,addmsjpingjia,getmsjusers} from '../../../utils/api'
function filehttp(file){
        const obj=file.data.replaceAll('\\\\','\\/')
        const http=`http://127.0.0.1:7001${obj}`
        const imghttp=http.replaceAll('\\','\/')
        return imghttp
}
export default {
    name: 'PhaemacyXuniEvaluate',

    data() {
        return {
          fileList:[],
          gridData: [],
        dialogTableVisible: false,
        ruleForm: {
          name: '',
          date1: '',
          date2: '',
          author: '',
          resource: '',
          desc: 4,
          textarea2:'',
          huifu:"",
          zjpj:""
        },
        firstimg:{
          name:'',
          url:''
        },
        huifuimg:{
          name:'',
          url:''
        },
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
        rules: {
          name: [
            { required: true, message: '请选择商品', trigger: 'blur' },
          ],
          textarea2:[
            { required: true, message: '请输入评价内容', trigger: 'blur' }
          ]
        },
        input:"",
        xuan:{},
        users:[]
        };
    },
    created(){
      this.shopslist()
      getmsjusers().then(res=>{
        this.users=res.data.data.map(v=>{
          v.user=JSON.parse(v.user)
          return v
        })
      })
    },
    mounted() {
        
    },

    methods: {
      // 获取所有 商品 查找商品 
      shopslist(){
        getZwyShopListBx().then(res=>{
        let data=res.data.data
        this.gridData=this.input==''?data:data.filter(item=>item.name.includes(this.input))
      })
      },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let date=(this.ruleForm.date1==''||this.ruleForm.date1==null)?new Date().toLocaleDateString():this.ruleForm.date1.toLocaleDateString();
            let time=(this.ruleForm.date2==''||this.ruleForm.date2==null)?new Date().toLocaleTimeString():this.ruleForm.date2.toLocaleTimeString();
            console.log(this.ruleForm);
            let n=Math.floor(Math.random()*this.users.length)
            let spinfo={
              img:this.xuan.img,
              name:this.xuan.name,
            }
            let first={
              first:this.ruleForm.textarea2,
              img:this.firstimg.url
            }
            let hui={
              huifu:this.ruleForm.huifu,
              img:this.huifuimg.url
            }
            let obj={
              dingnums:`gml${Math.floor(Math.random()*(10000000-1000000))+1000000}`,
              spininfo:JSON.stringify(spinfo),
              pjtime:`${date.replaceAll('/','-')} ${time}`,
              pjuser:this.ruleForm.resource?this.ruleForm.resource:this.users[n].user.username,
              userauthor:this.ruleForm.author?this.ruleForm.author:this.users[n].user.author,
              pjmaijia:this.users[n].userId,
              firstpj:JSON.stringify(first),
              huistatu:this.ruleForm.huifu==''?'未回复':'已回复',
              shstatu:'未审核',
              hfpjia:JSON.stringify(hui),
              pfdengji:this.ruleForm.desc
            }
            addmsjpingjia(obj).then(res=>{
              let that=this
            this.$notify({
          title: '成功',
          message: '评论成功',
          type: 'success',
          duration: 0,
          onClose(){
            that.$emit('xuni',{show:1})
          }
        });
            })
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm() {
        console.log(111);
        let obj={
            show:1,
        }
        this.$emit('xuni',obj)
      },
      // 打开商品弹出框 
      opensp(){
        this.dialogTableVisible=true
      },
      // 选择 取消商品 
      handel(v){
        this.xuan=v.id==this.xuan.id?{}:v
      },
      // 搜索商品
      onsearch(){
        this.shopslist()
      },
      // 关闭商品弹出框 
      quxiao(){
        this.dialogTableVisible=false
      },
      // 保存
      onbaocun(){
        let flag=JSON.stringify(this.xuan)
        if(flag=='{}'){
          this.$message.error('请选择商品')
        }else{
          this.ruleForm.name=this.xuan.name
          this.quxiao()
        }
      },
      //  
      handleAvatarSuccess(file,filelist){
        this.ruleForm.author=filehttp(file)
      },
      // 删除回显的头像图片
      deleauthor(){
        this.ruleForm.author=''
      },
      // 
      handlefirstSuccess(file,filelist){
        this.firstimg.name=filelist.name
        this.firstimg.url=filehttp(file)
      },
      handlehuifutSuccess(file,filelist){
        this.huifuimg.name=filelist.name
        this.huifuimg.url=filehttp(file)
      }
    },
};
</script>

<style  scoped>
*{
    padding: 0;
    margin: 0;
}
.xuni_pj{
    width: 100%;
    height: calc(100vh - 165px);
    overflow-y: scroll;
    padding: 0 80px 0 0;
}
.el-form-item{
    margin-bottom: 20px;
}
.msj_inputs{
    width: 200px;
}
.zhezhao{
  width: 100%;
  height: 100vh;
  background: #333;
  z-index: 999;
  opacity: 0.5;
  position: fixed;
  top: 0; left: 0;
}
.spsearch{
  width: 100%;
  display: flex; align-items: center;
}
.spsearch p{
  width: 100px;
  text-align: center;
}
.msj_shoplist{
  display: flex; align-items: center;
  font-size: 14px;
}
.msj_shoplist span{
  display: inline-block;
  width: 100%; text-align: center;
}
.msj_shoplist_img{
  width: 150px; box-sizing: border-box;
  padding: 0 15px;
}
.msj_shoplist_img img{
  width: 50px;
}
.msj_author{
  width: 80px; margin: 5px 0 0;
  height: 80px;
  background: #eee;
  color: #ccc;
  font-size: 20px;
  display: flex; position: relative;
  justify-content: center;
  align-items: center;
}
.msj_author img{
  width: 100%;
  height: 100%;
}
</style>